<template>
  <div id="app">
    <div id="nav_box">
      <div class="logo">
        <img src="./assets/image/ChinaMobile.png" alt />
        <div class="logo_title">
          <p class="logo_CH">贵州移动物联网端到端分析平台</p>
          <p class="logo_EN">
            Guizhou mobile Internet end to end analysis platform
          </p>
        </div>
      </div>
      <div id="nav">
        <router-link to="/">全省概况</router-link>
        <router-link to="/national">全省业务</router-link>
        <router-link to="/survey">贵阳概况</router-link>
        <router-link to="/business">贵阳业务</router-link>
        <router-link to="/network">网络拓扑</router-link>
        <router-link to="/monitor"> 告警监控 </router-link>
      </div>
      <!-- 时间 -->
      <div id="localtime">
        <span class="particular">{{ particular }}</span>
        <span class="time">{{ datetime }}</span>
      </div>
      <!-- 账号信息 -->
      <div class="account_box">
        <div class="img">
          <img src="./assets/image/Vectorintelligentobject_4.png" alt />
        </div>
        <div class="account">
          <p class="account_name">裴元</p>
          <p class="account_position">项目经理</p>
        </div>
      </div>
      <!-- 设置 -->
      <div class="setup">
        <img src="./assets/image/set_up.png" alt />
      </div>
      <!-- 退出 -->
      <div class="out">
        <el-button type="text" @click="open">
          <img :src="outimg" alt />
        </el-button>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      timer: "",
      datetime: "",
      particular: "",
      outimg: require("./assets/image/Bootkey.png"),
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.datetime = this.dayjs().format("HH:mm:ss");
      this.particular = this.dayjs().format("YYYY-MM-DD");
    }, 1000);
    // // 当前
    // console.log(this.dayjs().format("YYYYMMDDHH"));
    // // 增加
    // console.log(this.dayjs().add(1, 'day').format("YYYYMMDDHH"));
    // // 减少
    // console.log(this.dayjs().subtract(1, 'day').format("YYYYMMDDHH"));
  },
  methods: {
    open() {
      this.outimg = require("./assets/image/PowerActive.png");
      this.$confirm("您确定退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.location.href = "http://www.baidu.com";
        })
        .catch(() => {
          this.outimg = require("./assets/image/Bootkey.png");
        });
    },
  },
  beforeDestroy() {
    /* 离开页面前销毁定时器 */
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="scss">
@import "./style/fonts/font.css";
* {
  margin: 0;
  padding: 0;
}
li,
a {
  text-decoration: none;
  list-style-type: none;
}
select,
button,
input {
  border: 0;
  background-color: transparent;
  outline: none;
}
#app {
  width: 100vw;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  #nav_box {
    width: 100vw;
    height: 5vh;
    background-color: #eef1f9;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
}

.logo {
  width: 22.5vw;
  height: 5vh;
  margin-left: 0.5vw;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.logo_title {
  height: 4vh;
  margin-left: 0.1vw;
}
.logo img {
  width: 35px;
  height: 35px;
}
.logo_CH {
  font-size: 20px;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-weight: 700;
}
.logo_EN {
  font-size: 12px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
}

#nav {
  width: 54vw;
  height: 5vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

#nav a {
  width: 8.5vw;
  height: 4vh;
  line-height: 4vh;
  margin: 0 0.2vw;
  color: black;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  background: url("./assets/image/rectangle1.png") no-repeat;
  background-size: 100% 100%;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
}

#nav a.router-link-exact-active {
  color: white;
}
#nav a.router-link-exact-active p {
  border-color: #468fc2;
  display: block;
}
#localtime {
  width: 9.5vw;
  height: 4vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: space-between;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  padding-right: 5px;
  margin-right: 7px;
  border-right: 2px solid #cbdbfb;
}
.account_box {
  width: 6vw;
  height: 4vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding-right: 5px;
  margin-right: 7px;
  border-right: 2px solid #cbdbfb;
}
.account_box .account_position {
  font-size: 14px;
}
.setup {
  width: 30px;
  height: 30px;
  border-right: 2px solid #cbdbfb;
  padding-right: 7px;
  cursor: pointer;
}
.setup img {
  width: 30px;
  height: 30px;
}
.out {
  width: 30px;
  height: 30px;
  display: inline-block;
  color: #0064a4;
  margin-left: 10px;
  cursor: pointer;
}
.out .el-button {
  padding: 0;
}
.out img {
  width: 30px;
  height: 30px;
}
@media screen and (max-width: 1600px) {
  #nav_box {
    width: 100vw;
    height: 6vh;
    background-color: #eef1f9;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .logo {
    width: 27vw;
    height: 5vh;
    margin-left: 0.5vw;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .logo_title {
    height: 5vh;
    margin-left: 0.1vw;
  }
  .logo img {
    width: 20px;
    height: 20px;
  }
  .logo_CH {
    font-size: 15px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
  }
  .logo_EN {
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: bold;
  }

  #nav {
    width: 50vw;
    height: 5vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  #nav a {
    width: 8.5vw;
    height: 4vh;
    line-height: 4vh;
    margin: 0 0.2vw;
    color: #dfe7f5;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    background: url("./assets/image/rectangle1.png") no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  }

  #nav a.router-link-exact-active {
    color: white;
  }
  #nav a.router-link-exact-active p {
    border-color: #468fc2;
    display: block;
  }
  #localtime {
    width: 9.5vw;
    height: 4vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    padding-right: 5px;
    margin-right: 7px;
    border-right: 2px solid #cbdbfb;
  }
  .account_box {
    width: 6vw;
    height: 4vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding-right: 5px;
    margin-right: 7px;
    border-right: 2px solid #cbdbfb;
  }
  .account_box .img img {
    width: 30px;
    height: 30px;
  }
  .account_box .account_position {
    font-size: 12px;
  }
  .setup {
    width: 30px;
    height: 30px;
    border-right: 2px solid #cbdbfb;
    padding-right: 7px;
  }
  .setup img {
    width: 25px;
    height: 25px;
    margin-top: 2px;
    cursor: pointer;
  }
  .out {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: #0064a4;
    margin-left: 10px;
  }
  .out .el-button {
    padding: 0;
  }
  .out img {
    width: 25px;
    height: 25px;
    margin-top: 2px;
    cursor: pointer;
  }
}
@media screen and (max-width: 1366px) {
  #nav_box {
    width: 100vw;
    height: 6vh;
    background-color: #eef1f9;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .logo {
    width: 27vw;
    height: 6vh;
    margin-left: 0.5vw;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .logo_title {
    height: 6vh;
    margin-left: 0.1vw;
  }
  .logo img {
    width: 20px;
    height: 20px;
  }
  .logo_CH {
    font-size: 15px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
  }
  .logo_EN {
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: bold;
  }

  #nav {
    width: 50vw;
    height: 5vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  #nav a {
    width: 8.5vw;
    height: 4vh;
    line-height: 4vh;
    margin: 0 0.2vw;
    color: #dfe7f5;
    font-weight: 500;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    background: url("./assets/image/rectangle1.png") no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  }

  #nav a.router-link-exact-active {
    color: white;
  }
  #nav a.router-link-exact-active p {
    border-color: #468fc2;
    display: block;
  }
  #localtime {
    width: 9.5vw;
    height: 4vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 12px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    padding-right: 5px;
    margin-right: 7px;
    border-right: 2px solid #cbdbfb;
  }
  .account_box {
    width: 6vw;
    height: 4vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding-right: 5px;
    margin-right: 7px;
    border-right: 2px solid #cbdbfb;
  }
  .account_box .img img {
    width: 30px;
    height: 30px;
  }
  .account_box .account_position {
    font-size: 12px;
  }
  .setup {
    width: 30px;
    height: 30px;
    border-right: 2px solid #cbdbfb;
    padding-right: 7px;
  }
  .setup img {
    width: 25px;
    height: 25px;
    margin-top: 2px;
    cursor: pointer;
  }
  .out {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: #0064a4;
    margin-left: 10px;
  }
  .out .el-button {
    padding: 0;
  }
  .out img {
    width: 25px;
    height: 25px;
    margin-top: 2px;
    cursor: pointer;
  }
}
</style>


